<template>
	<div class="home" ref="home">
		<div class="home-content">
			<ul class="pic-list">
				<li v-for="(item, index) in photo">
					<img v-bind:src="item.img" />
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import BetterScroll from 'better-scroll';
	export default {
		name: 'photo',
		data() {
			return {
				photo: {}
			};
		},
		created() {
			this.photo = this.$store.state.girlPhoto.showapi_res_body.pagebean.contentlist;
			this.$nextTick(() => {
				console.log(this.$refs.home);
				this.scroll = new BetterScroll(this.$refs.home, {
					click: true
				});
			});
		}
	};
</script>

<style lang="less">
	.home {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		padding-top: 45px;
		padding-bottom: 50px;
	}
	
	.home-content {
		box-sizing: content-box;
		width: 100%;
		padding-bottom: 80px;
	}
	
	.pic-list {
		width: 100%;
		height: 100%;
		margin-top: 0px;
		li {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			width: 100% /3;
			img {
				width: 100%;
			}
		}
	}
</style>